import Taro, { Component } from '@tarojs/taro';
import { View, ScrollView, Image, Text } from '@tarojs/components';
import { DNavBar, DTabs, DItemError } from '@/components';
import { AtSearchBar } from 'taro-ui'
import './index.scss';
import http from '@/api'

export default class PersonCheck extends Component {
  state = {
    titleIcon: require('@/assets/images/person_icon.png'),
    rightArrowIcon: require('@/assets/images/right_arrow_icon.png'),
    tabs: [{
      name: '审核中',
      value: 1
    }, {
      name: '已处理',
      value: 9
    }],
    list: [],
    tabIndex: 1,
    totalPage: 0,
    form: {
      page: 1,
      limit: 10
    },
    searchVal: ''
  }
  componentDidShow() {
	  let tab = this.$router.params.tab
	  if(tab&&this.state.tabs.find(list=>list.value==tab).value){
			  this.setState({
			  		 tabIndex:+this.$router.params.tab
			  },this.getPersonAuthList)
	  }else{
		 this.getPersonAuthList()
	  }
  }
  onScrollToLower = () => {
    this.setState({
      form: {
        ...this.state.form,
        page: this.state.form.page + 1
      }
    }, this.getPersonAuthList)
  }
  getPersonAuthList() {
    let { form, tabIndex: authStatus } = this.state
    if (form.page != 1 && form.page > this.state.totalPage) return

    http.getPersonAuthList({ ...form, authStatus }).then(({ list, totalPage }) => {
      if (form.page === 1) {
        this.setState({ list, totalPage })
      } else {
        this.setState({ list: [...this.state.list, ...list], totalPage })
      }
    })
  }
  computedClass = (status) => {
    return {
      2: 'pass',
      3: 'no-pass',
      4: 'no-pass',
    }[status]
  }
  handleTabClick = (index) => {
    let form = this.state.form
    form.page = 1
    this.setState({ tabIndex: index,list:[], form }, this.getPersonAuthList)
  }
  handleItemClick = (id) => {
    Taro.navigateTo({ url: '/pages/personCheck/detail?id='+id,})
  }
  searchValChange = (val) => {
    this.setState({ searchVal: val.trim() })
  }
  onClear = () => {
    let form = this.state.form
    form.content = ''
    this.setState({ searchVal: '', form })
  }
  onActionClick = () => {
    this.setState({
      form: {
        ...this.state.form,
        page: 1,
        content: this.state.searchVal
      },
    }, this.getPersonAuthList)
  }

  render() {
    const { tabs, list, tabIndex, titleIcon, rightArrowIcon, searchVal } = this.state;

    return (
      <View className="person-check">
        <DNavBar title="个人认证审核"></DNavBar>

        <AtSearchBar value={searchVal}
                     maxLength={80}
                     onChange={this.searchValChange}
                     onActionClick={this.onActionClick}
                     onClear={this.onClear} />

        <DTabs tabs={tabs} index={tabIndex} onClick={this.handleTabClick} />

        <ScrollView scrollY className="person-check__body" onScrollToLower={this.onScrollToLower}>
          {
            list.map(item => (
              <View className="list-item list-item--style" onClick={() => this.handleItemClick(item.id)}>
                <View className="list-item__title">
                  <Image src={titleIcon} className="list-item__title__icon"></Image>
                  <Text className="list-item__title__text">{item.imCardUrl}</Text>
                  <Text className="list-item__title__text" style="margin-left: 5px;"> {item.creatorContact}</Text>
                  {
                    tabIndex === 9 && <View className={['list-item__title__tag', this.computedClass(item.authStatus)].join(' ')}>
                      <Text>{{2: '认证通过', 3: '认证不通过', 4: '禁用'}[item.authStatus]}</Text>
                    </View>
                  }
                </View>
                <View className="list-item__info">
                  <View className="list-item__info__text">申请时间：{item.createTime}</View>
                </View>

                { tabIndex === 1 && <Image src={rightArrowIcon} className="list-item__arrow"></Image> }
              </View>
            ))
          }
          {
            list.length === 0 && <DItemError type={searchVal ? 2 : 1}></DItemError>
          }
        </ScrollView>
      </View>
    )
  }
}
